<template>
  <div class="goods-container">
    <div :style="wraperStyle">
      <cube-scroll ref="scroll" :data="goods" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
        <!-- 商品列表 -->
        <div class="goods-list">
          <!-- 商品item项 -->
          <div v-for="item in goods" :key="item.id" class="goods-item" @click="goToGoodsDetail(item.id)">
            <img class="pic" :src="item.img_url" alt="" />
            <h1 class="title">{{ item.title }}</h1>
            <div class="info-box">
              <p class="price">
                <span>￥{{ item.sell_price }}</span>
                <span>￥{{ item.market_price }}</span>
              </p>
              <p class="info">
                <span>热卖中</span>
                <span>剩余{{ item.stock_quantity }}件</span>
              </p>
            </div>
          </div>
        </div>
      </cube-scroll>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'cms',
  data() {
    return {
      // 商品列表，默认为空
      goods: [],
      // 当前的页码值
      page: 1,
      // 数据是否加载完毕了
      isover: false,
      // cube-scroll 组件外部容器的样式
      wraperStyle: {
        height: '6000px'
      },
      // cube-scroll 的配置项
      options: {
        // 上拉加载更多
        pullUpLoad: {
          visible: true,
          txt: {
            more: '上滑加载更多',
            noMore: '没有更多数据'
          },
          threshold: 50
        },
        // 下拉刷新
        pullDownRefresh: true
      }
    }
  },
  async asyncData({ params, $axios }) {
    let goods = []
    const { data: res } = await $axios.get(`/api/getgoods?pageindex=1`)
    if (res.status === 0) {
      goods = res.message
    }

    return {
      goods
    }
  },
  beforeMount() {
    this.wraperStyle.height = window.innerHeight - 90 + 'px'
  },
  methods: {
    // 下拉刷新
    loadTop() {
      this.isover = false
      this.page = 1
      this.goods = []
      this.getGoodsList(() => {
        this.$refs.loadmore.onTopLoaded()
      })
    },
    // 根据页码值获取商品列表数据
    async getGoodsList(cb) {
      const { data: res } = await this.$axios.get(`/api/getgoods?pageindex=${this.page}`)

      if (res.status === 0) {
        this.goods = [...this.goods, ...res.message]
        // 没有更多数据
        if (res.message.length <= 0) {
          this.$refs.scroll.forceUpdate(false)
        }
      }
    },
    // 跳转到商品详情页面
    goToGoodsDetail(id) {
      this.$router.push('/goods/' + id)
    },
    // 下拉刷新
    onPullingDown() {
      this.isover = false
      this.page = 1
      this.goods = []
      this.getGoodsList()
    },
    // 上拉加载更多
    onPullingUp() {
      this.page++
      this.getGoodsList()
    }
  }
}
</script>

<style lang="less" scoped>
.scroll-list-wrap {
  height: 350px;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .goods-item {
    box-sizing: border-box;
    width: 48%;
    min-height: 260px;
    border: 1px solid #eee;
    margin: 8px 1% 0 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    .pic {
      width: 100%;
      min-height: 178px;
    }
    .title {
      font-size: 13px;
      font-weight: bold;
    }
    .info-box {
      font-size: 12px;
      background-color: #eee;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 5px;
      margin-top: 5px;
      .price {
        & span:nth-child(1) {
          color: red;
          font-weight: bold;
          font-size: 14px;
        }
        & span:nth-child(2) {
          color: gray;
          text-decoration: line-through;
          font-size: 12px;
          margin-left: 5px;
          font-style: italic;
        }
      }
      .info {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
